{% extends "album_layout.html"  %}
{% block content %}
<main role="main">
    <div class="album py-4 bg-light">
<div class="container" style="width: 80%;">
    <div class="well" style="padding-bottom: 0;">
        <div class="row">
            <h2 class="mx-auto mb-5">路线查找</h2>
            <div class="col-sm-12" style="display:flex;justify-content:center;">
                <form action="/searchway" enctype='multipart/form-data' method="post">
                    <div class="form-inline">
                        <div class="form-group" style="margin-right: 70px;">
                            <label>出发地:</label>
                            <input required name="origin_place" id="origin_place"  type="text" placeholder="请输入出发地">
						</div>
						<div class="form-group" style="margin-right: 70px;">
                            <label>目的地:</label>
                            <input required name="destination_place" id="destination_place"  type="text" placeholder="请输入目的地">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn-sm btn-primary" id="btn_query"> 查询</button>
                            <!-- <button type="reset" class="btn-sm btn-white"> 重置</button> -->
                        </div>
					</div>
					<p>步行导航路径规划，建议使用近距离规划。<br>搜索规范：省/市/县/具体地址</br>
						<br>例如：广东省东莞市石排镇石排公园——广东省东莞市石龙镇东莞站</p>
                </form>
                <br>
            </div>
        </div>
    </div>
    {% if direct_way %}
    <div class="well">
        <div class="row">
        <div  class="offset-sm-3 col-sm-9">
			<h4>查询路径信息如下：</h4>
			<br>
			<table border="1">
				{% for item in direct_way %}
					<tr><td style="width: 30%;">{{loop.index}}</td><td style="width: 70%;">{{item}}</td></tr>
				{% endfor %}
			</table>
			<br>
        </div>
    </div>
    </div>
    {% endif %}
</div>
    </div>
    </main>
{%- endblock content %}